<template>
  <div class="main-box">
    <div class="main">
      <!-- 手机商品展示区域 -->
      <div class="phone">
        <div class="box-hd">
          <div class="title">手机</div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <router-link to>
              <img :src="$target +'public/imgs/phone/phone.png'" />
            </router-link>
          </div>
          <div class="list">
            <my-list :listData="phoneList"></my-list>
          </div>
        </div>
      </div>
      <!-- 家电商品展示区域 -->
      <div class="appliance" id="promo-menu">
        <div class="box-hd">
          <div class="title">家电</div>
          <div class="more">
            <div class="myMenu">
              <ul>
                <li
                  :class="applianceActive == 1 ? 'active':''"
                  @mouseover="applianceMouseOver($event,1)"
                >热门</li>
                <li
                  :class="applianceActive == 2 ? 'active':''"
                  @mouseover="applianceMouseOver($event,2)"
                >电视</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <ul>
              <li>
                <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
              </li>
              <li>
                <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
              </li>
            </ul>
          </div>
          <div class="list">
            <my-list :listData="applianceHotList"></my-list>
          </div>
        </div>
      </div>
      <!-- 配件商品展示区域 -->
      <div class="accessory">
        <div class="box-hd">
          <div class="title">配件</div>
          <div class="more">
            <div class="myMenu">
              <ul>
                <li :class="partsActive == 1 ? 'active':''" @mouseover="partsMouseOver($event,1)">热门</li>
                <li
                  :class="partsActive == 2 ? 'active':''"
                  @mouseover="partsMouseOver($event,2)"
                >保护套</li>
                <li
                  :class="partsActive == 3 ? 'active':''"
                  @mouseover="partsMouseOver($event,3)"
                >充电器</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box-bd">
          <div class="promo-list">
            <ul>
              <li>
                <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt />
              </li>
              <li>
                <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt />
              </li>
            </ul>
          </div>
          <div class="list">
            <my-list :listData="partsHotList"></my-list>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="TWODIV">
      <span class="title">手机</span>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt />
        </dt>
        <dd>
          <my-list :listData="cellphone"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
       <div class="ThreeDiv">
      <span class="title">家电</span>
          <p>
            <span class="span1">热门</span>
            <span class="span2">电视影音</span>
          </p>
      </div>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="appliances"></my-list>
        </dd>
      </dl>
    </div>
    <div class="TWODIV">
        <div class="ThreeDiv">
      <span class="title">配件</span>
          <p>
            <span class="span3">热门</span>
            <span class="span1" >保护套</span>
            <span class="span2" >充电器</span>
          </p>
      </div>
      <dl>
        <dt>
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" alt />
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png" alt />
        </dt>
        <dd>
          <my-list :listData="accessories"></my-list>
        </dd>
      </dl>
  </div>-->
</template>
<script>
import API from "../api/homeApi";
export default {
  data() {
    return {
      // cellphone: [],
      // appliances: [],
      // accessories: []
      phoneList: [], //手机数据
      applianceList: [], //家电热门数据
      TVListData: [], //电视数据
      partsList: [], //配件热门数据
      coverListData: [], //保护套数据
      chargerListData: [], //充电器数据

      applianceHotList: [], //家电热门数据(渲染用

      partsHotList: [], //配件热门数据(渲染用

      applianceActive: 1, //当前选择的分类表示 //热门家电 1:热门数据 2:电视
      partsActive: 1 //配件分类 1热门  2保护套 3充电器
    };
  },
  created() {
    this.callsFig();
  },
  methods: {
    // async callsFig() {
    //   let res = await API.getHotProduct({ categoryName: ["手机"] });
    //   let ress = await API.getHotProduct({
    //     categoryName: ["电视机", "空调", "洗衣机"]
    //   });
    //   let resss = await API.getHotProduct({
    //     categoryName: ["保护套", "保护膜", "充电器", "充电宝"]
    //   });
    //   this.cellphone = res.Product;
    //   this.accessories = resss.Product;
    //   this.appliances = ress.Product;
    // }
  }
};
</script>
<style lang="scss" scoped>
.TWODIV {
  display: flex;
  flex-direction: column;
}
.title {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-left: 78px;
}
dl {
  display: flex;
  width: 90%;
  height: 735px;
  margin: auto;
  background-color: #e9eef3;

  dt {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    img {
      padding-bottom: 23px;
      width: 276px;
      // height: 357px;
    }
  }
  dd {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 100%;
      height: 103%;
      padding: 0;
      justify-content: space-between;
      flex-wrap: wrap;
      display: flex;

      li {
        margin-left: 20px;
        background: white;
        width: 23%;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        align-items: center;
        justify-content: center;
        a {
          font-size: 18px;
          color: #333;
          text-decoration: none;
          font-weight: bold;
        }
        img {
          width: 210px;
          height: 210px;
        }
        .oneP {
          font-size: 12px;
          color: #b0b0b0;
        }
        p {
          margin-top: 14px;
          .oneSpan {
            color: red;
            margin-right: 13px;
          }
          .twoSpan {
            text-decoration: line-through;
            color: #b0b0b0;
          }
        }
      }
    }
  }
}
.ThreeDiv {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .span1 {
    float: left;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
    margin-right: 20px;
  }
  .span2 {
    float: left;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
    margin-right: 94px;
  }
  .span3 {
    float: left;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
    margin-right: 20px;
  }
}
</style>